<template>
  <a-modal
    :visible="visible"
    :width="800"
    :bodyStyle="{}"
    :footer="null"
    @ok="ok"
    @cancel="cancel"
  >
    <template slot="title">
      <span class="user-details-modal-title">用户列表</span>
    </template>
    <a-table
          :columns="columns"
          :data-source="tableData"
          :rowKey="(record, index) => index"
          :pagination="pagination"
          :loading="tableLoading"
          :bordered="false"
           @change="onChange"
        >
        <span slot="confirmStatus" slot-scope="text, record">
              <!-- 订单状态 1=拼单中 2=拼单完成 3=订单结束 4=取消 -->
            <a-tag v-if="record.confirmStatus == 1" color="#2980b9">待签到</a-tag>
            <a-tag v-if="record.confirmStatus == 2" color="#27ae60">已签到</a-tag>
          </span>
        </a-table>
    <div>

    </div>
  </a-modal>
</template>

<script>
// import storage from "store";

import { getAllSchool } from "../../../api/school/school";
import { addUser, updataUser } from "../../../api/user/user";
import { qryOrderUser } from "../../../api/order/order";
const columns = [
  {
    title: "用户Id",
    dataIndex: "userId",
    key: "userId",
    // width: "160px",
    // align: "center",
  },
  {
    title: "真实名字",
    dataIndex: "realName",
    key: "realName",
    // width: "170px",
  },
  {
    title: "昵称",
    dataIndex: "nickName",
    key: "nickName",
    // width: "170px",
  },
  {
    title: "电话",
    dataIndex: "phone",
    key: "phone",
    // scopedSlots: { customRender: 'endTime' },
  },
  {
    title: "信用分",
    dataIndex: "creditScore",
    key: "creditScore",
    width: "100px",
    // scopedSlots: { customRender: 'endTime' },
  },
  {
    title: "学校名",
    dataIndex: "schoolName",
    key: "schoolName",
    width: "150px",
    // scopedSlots: { customRender: "beginTime" },
  },
  {
    title: "确认状态",
    dataIndex: "confirmStatus",
    
    // scopedSlots: { customRender: 'endTime' },
        scopedSlots: { customRender: "confirmStatus" },
  },
];

export default {
  name: "UserEditModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    editType: {
      type: String,
      default: "add",
    },
    OrderData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      submitBtnLoading: false, // 提交按钮是否加载状态

      tableLoading:false,
      password: undefined,
      orgListData: [],
      majorListData: [],

      tableData: [],
      columns,
      orderData:{},
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      formItemLayout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 19 },
      },
      submitBtnLayout: {
        labelCol: { span: 0 },
        wrapperCol: { span: 24 },
      },
      
      pagination: {
        current: 1,
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: 0,
        showQuickJumper: true,
        showSizeChanger: false,
        pageSizeOptions: ["5", "10", "20", "50"],
        showTotal: (total) => `共 ${total} 条`,
      },
    };
  },
  watch: {
    OrderData(val){
      console.log(val);
      if(val.orderId == null){
        return;
      }
      this.orderData = val;
      this.getOrg();
    }
  },
  created() {
  },
  methods: {
    onChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getOrg();
    },
    // 获取组织
    getOrg() {
      console.log(this.orderData);
      this.tableLoading = true;
      var queryObj = {
        orderId: this.orderData.orderId,
      }
      const requestValue = {
        currPage: this.pagination.current,
        pageSize: this.pagination.defaultPageSize,
        queryObj: queryObj,
      };
      qryOrderUser(requestValue)
        .then((res) => {
          const result = res.data.data;
          const pagination = { ...this.pagination };
          pagination.total = result.total;
          this.pagination = pagination;
          this.tableData = result.list;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    ok() {
      this.$emit("handleOk");
    },
    cancel() {
      this.$emit("handleCancel");
    },
    handleSubmit(e) {
      e.preventDefault();

      const {
        form: { validateFields },
      } = this;

      const validateFieldsKey = [
        "userId",
        "nickName",
        "schoolName",
        "colleges",
        "grade",
        "realName",
        "phone",
        "creditScore",
        "userPass",
      ];

      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          this.submitBtnLoading = true;
          console.log(values);
          if (this.editType === "add") {
            addUser(values)
              .then((res) => {
                console.log(res);
                setTimeout(() => {
                  this.submitBtnLoading = false;
                  this.$emit("handleOk");
                }, 2000);
              })
              .catch((err) => {
                console.log(err);
                this.submitBtnLoading = false;
              });
          } else if (this.editType === "change") {
            values.userId = this.orderData.userId;
            updataUser(values)
              .then((res) => {
                console.log(res);
                setTimeout(() => {
                  this.submitBtnLoading = false;
                  this.$emit("handleOk");
                }, 2000);
              })
              .catch((err) => {
                console.log(err);
                this.submitBtnLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.user-details-modal-title {
  font-size: 20px;
  font-weight: bolder;
  color: #666666;
}
</style>
